<template>
    <div style="display: flex; flex-wrap: wrap; gap: 10px;">
        <div class="card">
            <div>全局变量在template模版中可以直接用过花括号调用</div>
            <div>{{ $name }}</div>
            <div>{{ $fn() }}</div>
       </div>
        <div class="card">
            <div>js中通过getCurrentInstance获取当前页面的实例调用</div>
        </div>
    </div>
</template> 

<script setup lang="ts">
import { getCurrentInstance } from 'vue';
 const currentInstance = getCurrentInstance()

console.log(currentInstance?.proxy?.$name)
console.log(currentInstance?.proxy?.$fn())
</script>

<style scoped>
    .card {
        padding: 10px;
        border-radius: 20px;
        width: 300px;
        height: 300px;
        background-color: #fff;  
    }
    img {
        width: 60%;
        height: 60%;
    }
</style>